<template>
  <div
    class="expert-card group bg-white rounded-2xl shadow p-2 flex flex-col items-center relative border border-slate-100 hover:shadow-xl hover:-translate-y-1 transition-all duration-200 cursor-pointer min-h-[260px]"
    @click="goToDetail"
  >
    <div class="avatar-ring mb-2 relative">
      <UserAvatar :avatar="expert.avatar || defaultAvatar" size="72" :noDropdown="none" />
      <span v-if="expert.isRecommend" class="absolute -top-2 -right-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white text-xs px-2 py-0.5 rounded-full shadow">推荐</span>
    </div>
    <div class="mt-1 text-lg font-bold text-slate-800 group-hover:text-blue-600 transition">{{ expert.name }}</div>
    <div class="text-slate-500 text-xs mt-1">{{ expert.org }}</div>
    <div class="text-slate-400 text-xs mt-0.5">{{ expert.title }}</div>
    <div class="flex flex-wrap gap-1 mt-2 justify-center">
      <template v-if=" expert.specialtyTagNames.length > 2">
        <el-tag
          v-for="tag in  expert.specialtyTagNames.slice(0,2)"
          :key="tag"
          :type="tagColor(tag)"
          size="small"
          class="border font-medium cursor-pointer hover:scale-105 transition"
          @click.stop="$emit('select-tag', tag)">
          {{ tag }}
        </el-tag>
        <el-tooltip placement="top" effect="dark">
          <template #content>
            <div class="flex flex-wrap gap-1 max-w-xs">
              <el-tag
                v-for="tag in  expert.specialtyTagNames"
                :key="tag + '-all'"
                :type="tagColor(tag)"
                size="small"
                class="border font-medium mb-1"
              >{{ tag }}</el-tag>
            </div>
          </template>
          <el-tag size="small" class="border font-medium cursor-pointer bg-blue-50 text-blue-600">+{{  expert.specialtyTagNames.length - 2 }}</el-tag>
        </el-tooltip>
      </template>
      <template v-else>
        <el-tag
          v-for="tag in expert.specialtyTagNames"
          :key="tag"
          :type="tagColor(tag)"
          size="small"
          class="border font-medium cursor-pointer hover:scale-105 transition"
          @click.stop="$emit('select-tag', tag)">
          {{ tag }}
        </el-tag>
      </template>
    </div>
    <div class="w-full h-px bg-gradient-to-r from-blue-100 to-transparent my-3"></div>
    <div class="flex gap-4 mt-1 text-xs text-slate-600 justify-center w-full whitespace-nowrap">
      <el-tooltip content="该专家累计答复问题数量" placement="top">
        <span class="flex items-center gap-1"><i class="el-icon-chat-dot-round text-blue-400"></i> 答复数 <b>{{ expert.ext?.answerCount || 0 }}</b></span>
      </el-tooltip>
      <el-tooltip content="该专家答复被采纳为最佳答案的占比" placement="top">
        <span class="flex items-center gap-1"><i class="el-icon-star-on text-yellow-400"></i> 最佳率 <b>{{ expert.ext?.bestAnswerRate || 0 }}%</b></span>
      </el-tooltip>
    </div>
    <!-- <button type="button" class="mt-3 px-3 py-1 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 text-white text-xs font-semibold shadow hover:from-blue-500 hover:to-blue-700 transition" @click.stop="goToDetail">查看详情</button> -->

  </div>
</template>
<script setup>
import UserAvatar from '@/components/UserAvatar/UserAvatar.vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { computed } from 'vue'
import avatar from '@/assets/avatar.png'  
const props = defineProps({
  expert: Object,
  tagColor: Function,
  showActions: {
    type: Boolean,
    default: true
  }
})
const router = useRouter()
const route = useRoute()

// 安全地處理field字段，確保是字符串類型
// const fieldTags = computed(() => {
//   const fieldStr = typeof props.expert?.field === 'string' ? props.expert.field : (props.expert?.field || '')
//   return fieldStr ? fieldStr.split(/[，,\s]+/).filter(Boolean) : []
// })

function goToDetail() {
  if (props.expert && props.expert.id) {
    router.push(`/expert/${props.expert.id}`)
  }
}
const defaultAvatar = avatar
// 权限控制：有新增专家权限即有编辑/删除权限
const isAdmin = true // TODO: 替换为实际权限判断
</script>
<style scoped>
.expert-card {
  position: relative;
  box-shadow: 0 2px 12px 0 rgba(56, 112, 255, 0.08);
  border: 1.5px solid #e6eaf2;
  transition: box-shadow 0.2s, border 0.2s, transform 0.2s;
  min-width: 0;
}
.expert-card:hover {
  box-shadow: 0 6px 24px 0 rgba(56, 112, 255, 0.13);
  border-color: #a3c8fa;
  transform: translateY(-4px) scale(1.03);
}
.avatar-ring {
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, #a3c8fa 0%, #e6f0fa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.expert-card .edit-btn,
.expert-card .delete-btn {
  padding: 0 10px;
  height: 28px;
  font-size: 13px;
  border-radius: 1rem;
  box-shadow: 0 2px 8px 0 rgba(56,112,255,0.10);
}
.expert-card .edit-btn {
  background: linear-gradient(90deg, #e6f0fa 0%, #b3d8ff 100%);
  color: #1765ad;
  border: none;
}
.expert-card .edit-btn:hover {
  background: linear-gradient(90deg, #b3d8ff 0%, #e6f0fa 100%);
  color: #1765ad;
}
.expert-card .delete-btn {
  background: linear-gradient(90deg, #ffeded 0%, #ffd6d6 100%);
  color: #e53e3e;
  border: none;
}
.expert-card .delete-btn:hover {
  background: linear-gradient(90deg, #ffd6d6 0%, #ffeded 100%);
  color: #e53e3e;
}
.expert-card .icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 8px 0 rgba(56,112,255,0.10);
  background: rgba(255,255,255,0.92);
  border: none;
  transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.expert-card .icon-btn .el-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, transform 0.2s;
}
.expert-card .edit-btn .el-icon {
  color: #409eff;
}
.expert-card .delete-btn .el-icon {
  color: #f56c6c;
}
.expert-card .edit-btn:hover .el-icon {
  color: #1765ad;
  background: linear-gradient(90deg, #b3d8ff 0%, #e6f0fa 100%);
  transform: scale(1.18);
}
.expert-card .delete-btn:hover .el-icon {
  color: #e53e3e;
  background: linear-gradient(90deg, #ffd6d6 0%, #ffeded 100%);
  transform: scale(1.18);
}
.expert-card .icon-btn:hover {
  background: rgba(255,255,255,1);
  box-shadow: 0 4px 16px 0 rgba(56,112,255,0.15);
}
</style> 